<style>
    header.panel-heading a{display: block;background-color: #46b8da;padding: 3px 8px;color: #fff;border-radius: 3px;cursor: pointer;}
    #formorder{overflow: auto;}
    #formorder table{width: 100%;}
    #formorder table thead tr th,#formorder table tbody tr td{border: 1px solid #d3d2d2;text-align: center;width: 250px;padding: 0;line-height: 40px;}
    #formorder table thead tr th{color: #666666;font-weight: 500;background: #f0f0f0;cursor: default;}
    #formorder table tbody tr td{cursor: default;min-width: 100px;}
    #formorder table.active tr{display: table-row;}
	#formorder table tbody tr td label{margin: 0;}
    #formorder table tbody tr td a{
		display: inline-block;background-color: #dddddd;padding: 3px 8px;color: #717171;
		border-radius: 3px;cursor: pointer;margin: 5px 0;line-height: 20px;
	}
    #formorder table tbody tr td a:hover{background-color: #46b8da;color: #fff;}
    
	#pop-up-boxes{
        position: fixed;width: 100%;height: 100%;z-index: 20;top: 0;left: 0;display: none;
    }
    #pop-up-boxes-content{
        width: 500px;margin: 0 auto;font-size: 14px;
        border: 1px solid black;color: black;
        margin-top: 10%;background-color: #fff;border-radius: 10px;
    }
    #pop-up-boxes-title img{
        cursor: pointer;float: right;left: 0;top: 17px;width: 16px;height: 16px;margin: 3px;border: none;border-radius: 10px;
    }
    #pop-up-boxes-text{
        padding: 20px;text-align: center;color: #555555;
    }
    #pop-up-boxes-text input,#pop-up-boxes-text select{width: 100px;padding: 3px;}
    #pop-up-boxes-text a{
        display: inline-block;
        text-align: center;
        padding: 5px 10px;
        background-color: #5bc0de;
        color: #fff;
        border-radius: 5px;
    }
	#edit input{border: 1px solid #d3d2d2;}
	#pop-up-boxes-text input[type='checkbox']{width:30px;}
	#floating{overflow-y: auto;max-height: 500px;}
    #floating label{font-weight: 500;}
    #floating .box-table{width: 100%;}
	#floating .box-table th,#floating .box-table td{width: 33.3%;text-align: center;}
	
	#pop-up-boxess{
        position: fixed;width: 100%;height: 100%;z-index: 20;top: 0;left: 0;display: none;
    }
    #pop-up-boxess-content{
        width: 500px;margin: 0 auto;font-size: 14px;
        border: 1px solid black;color: black;
        margin-top: 10%;background-color: #fff;border-radius: 10px;
    }
    #pop-up-boxess-title img{
        cursor: pointer;float: right;left: 0;top: 17px;width: 16px;height: 16px;margin: 3px;border: none;border-radius: 10px;
    }
    #pop-up-boxess-text{padding: 20px;text-align: center;color: #555555;}
	#pop-up-boxess-text div{max-height: 300px;overflow:auto;}
	#pop-up-boxess-text div::-webkit-scrollbar{width: 2px;}
    #pop-up-boxess-text input,#pop-up-boxes-text select{width: 100px;padding: 3px;}
    #pop-up-boxess-text button{padding: 5px 10px;border: 1px solid #46b8da;background-color: #46b8da;color: #fff;border-radius: 3px;}
	#pop-up-boxess-text table{width: 100%;}
    #pop-up-boxess-text table thead tr th,#pop-up-boxess-text table tbody tr td{border: 1px solid #d3d2d2;text-align: center;width: 25%;}
    #pop-up-boxess-text table thead tr th{color: #666666;font-weight: 500;background: #f0f0f0;cursor: default;height: 35px;}
    #pop-up-boxess-text table tbody tr td{cursor: default;height: 35px;}
	.ui-datepicker-trigger{display: none;}
</style>
<link rel="stylesheet" href="/public/assets/sysadmin/mylzp/css/jquery-ui.css">
<script type="text/javascript" src="/public/assets/sysadmin/mylzp/js/jquery-ui.js"></script>
<section class="vbox">
    <section class="scrollable padder">
        <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
            <li><a href="#"><i class="fa fa-home"></i>酒店管理中心</a></li>
            <li><a href="#">酒店管理</a></li>
            <li><a href="#">价格管理</a></li>
            <li><a href="#">价格加幅设置</a></li>
        </ul>
        <div class="m-b-md">
            <h3 class="m-b-none"><span style="float:right;"></span>价格加幅设置</h3>
        </div>
        <section class="panel panel-default">
            <header class="panel-heading">
                <i data-title="ajax to load the data." data-placement="bottom" data-toggle="tooltip" class="fa fa-info-sign text-muted" data-original-title="" title=""></i>
                <b>价格加幅设置</b>
                <label style="font-size: 12px;font-weight: normal;color: #FF6F6F;"></label>
                <a style="float:right;margin-left: 20px;" href="<?=$this->url('hotel/price')?>">返回</a>
                <!--<a style="float:right;margin-left: 20px;"onclick="diff()">设置不同浮动</a>
                <a style="float:right;"onclick="status()">设置相同浮动</a>-->
            </header>
            <form action="<?=$this->url("hotel/datetime")?>" class="form-horizontal form-bordered form-validate" method="post" id="edit">
                <!-- 表格内容 -->
                <div id="formorder">
                    <table>
                        <thead>
                            <tr>
                            	<th class="check"><label style="display: block;"><input type="checkbox" name="allcheck" id="allcheck" /></label></th>
                                <th>房型</th>
                                <th>床型</th>
                                <th>底价(元)</th>
                                <th>入住人数</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <?php foreach ($types as $k=>$v){?>
                        <tr>
                        	<td class="check"><label style="display: block;"><input type="checkbox" name="typeid[]" value="<?=$v['id']?>" class="everycheck" /></label></td>
                        	<td><?=$v['title']?></td>
                        	<td><?=!empty($v['bed'])?$v['bed']:'空'?></td>
                            <td><?=$v['price']?></td>
                        	<td><?=!empty($v['maxnumber'])?$v['maxnumber']:0?></td>
                        	<td>
								<a onclick="status('<?=$v['id']?>','<?=$v['title']?>')">房价浮动</a>
								<a href="javascript:void(0);" onclick="showLog('<?=$v['id']?>','','','<?=$v['title']?>')" >操作日志</a>
							</td>
                        </tr>
                        <?php }?>
                    </table>
                </div>
                
    			<div id="pop-up-boxes">
    			    <div id="pop-up-boxes-content">
    			        <div id="pop-up-boxes-title"><label>&nbsp;浮动设置</label><img src="/public/assets/sysadmin/mylzp/img/error.png" /></div>
    			        <div id="pop-up-boxes-text">
                            
    		            	<div id="floating">
    		            		
    		                </div>
    		                
    			            <a href="javascript:void(0);" class="show_shadefrist" onclick="isedit()" >确认修改</a>
    			        </div>
    			    </div>
    			</div>
			</form>
        </section>
    </section>
</section>
<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>

<div id="pop-up-boxess">
    <div id="pop-up-boxess-content">
        <div id="pop-up-boxess-title"><label style="font-weight: 500;margin-left: 10px;"></label><img src="/public/assets/sysadmin/mylzp/img/error.png" /></div>
        <div id="pop-up-boxess-text">
			起始时间：<input type="text" name="sta" class="from2 datepickerinput" value="" readonly="" />
			-
			<input type="text" name="end" class="to2 datepickerinput" value="" readonly="" />
			&nbsp;&nbsp;
			<input type="hidden" name="parent_TypeId" value="" />
			<button>搜 索</button><br /><br />
			<table>
				<thead><tr><th>时间</th><th>浮动类型</th><th>价格(元)</th><th>操作时间</th></tr></thead>
			</table>
			<div>
				<table>
					<tbody><tr><td colspan='4' style='text-align: center;'>无记录</td></tr></tbody>
				</table>
			</div>
        </div>
    </div>
</div>

<script type="text/javascript">
$('#pop-up-boxes-title img').click(function(){
    $('#pop-up-boxes').hide();
});
$('#pop-up-boxess-title img').click(function(){
    $('#pop-up-boxess').hide();
});
$("#allcheck").click(function(){
    if(this.checked){
        $(".everycheck").prop("checked", true);
    }else{
        $(".everycheck").prop("checked", false);
    }
});
function isedit(){
	if($("#statime").val()==''||$("#endtime").val()==''){
		pub_alert_error('请选择时间段',2000);return false;
	}
    $("#edit").submit();
}
$(function(){
    $(".datepickerinput").datepicker({
        minDate: 0,
        showMonthAfterYear: true,
        changeMonth: true,
        numberOfMonths: 1,
        showButtonPanel: true,
        showOn: "both",
    });
    $('.ui-datepicker-trigger').remove();
});
function diff(){ //jquery获取复选框值 
	var chk_value =[]; 
	$('input[name="typeid[]"]:checked').each(function(){ 
		chk_value.push($(this).val()); 
	});
	if(chk_value.length==0){
		pub_alert_error("你还没有选择房型！",2000);return false;
	}
	$('#floating').html('');

	var url="<?=$this->url("hotel/boxShow")?>";
    var data="typeid="+chk_value;
    $.ajax({
        url:url,
        data:data,
        type:"POST",
        dataType:'json',
        success: function(msg){
            var data = '';
            	data += '<div id="status"><input type="hidden" name="status" value="2" />';
                data += '时 间：<input type="text" id="statime" name="statime" readonly style="background: #f0f0f0;width: 80px;" /> - ';
                data += '<input type="text" id="endtime" name="endtime" class="" readonly style="background: #fff;width: 80px;" /><br /><br />';
                data += '适用星期：<label><input type="checkbox" name="box[]" value="1" />周一</label> <label><input type="checkbox" name="box[]" value="2" />周二</label> <label><input type="checkbox" name="box[]" value="3" />周三</label> <label><input type="checkbox" name="box[]" value="4" />周四</label> <label><input type="checkbox" name="box[]" value="5" />周五</label> <label><input type="checkbox" name="box[]" value="6" />周六</label> <label><input type="checkbox" name="box[]" value="0" />周天</label>';
                data += '<table class="box-table">';
                data += 	'<tr>';
                data += 		'<th>房型名称</th><th>浮动类型</th><th>浮动金额</th>';
                data += 	'</tr>';
                for (key in msg){
                data += 	'<tr>';
        		data += 		'<td><input type="hidden" name="typeids[]" value="'+msg[key].id+'" />'+msg[key].title+'</td>';
        		data += 		'<td>';
        		data += 			'<select name="floating[]">';
        		data += 				'<option value="1">加幅</option>';
        		data += 				'<option value="2">减幅</option>';
        		data += 			'</select>';
        		data += 		'</td>';
        		data += 		'<td><input type="text" name="money[]" value="" style="background: #f0f0f0;" /></td>';
        		data += 	'</tr>';
        		}
        		data += '</table></div>';
        		$("#floating").html(data);
        		$('#edit input[name="statime"]').removeAttr('class');
        	    var now=new Date().getTime();
        	    $('#edit input[name="statime"]').addClass('sta_'+now);
        	    sdate('sta_'+now);
        	    $('#edit input[name="endtime"]').removeAttr('class');
        	    var now=new Date().getTime();
        	    $('#edit input[name="endtime"]').addClass('end_'+now);
        	    sdate('end_'+now);
        	    $('.ui-datepicker-trigger').remove();
        }
    });
	$('#pop-up-boxes').css({'display':'block'});
	//动态添加时间控件 calss
	
} 
var end=0;
function status(infoid,title){
	
	$('#status').remove();
    var data = '';
    	data += '<div id="status"><input type="hidden" name="status" value="1" />';
    	data += '<label id="title"><input type="hidden" name="parentTypeId" value="" />';
    	data += '房 型：<input type="text" name="title" value="" disabled style="background: #f0f0f0;" /></label><br /><br />';
    	data += '<select name="floating">';
    	data += '<option value="1">加幅金额</option>';
    	data += '<option value="2">减幅金额</option>';
    	data += '</select>';
    	data += ' <input type="text" name="money" value="" style="background: #f0f0f0;" /><br /><br />';
    	data += '时 间：<input type="text" id="statime" name="statime" readonly style="background: #f0f0f0;width: 80px;" /> - ';
    	data += '<input type="text" id="endtime" name="endtime" class="" readonly style="background: #fff;width: 80px;" /><br /><br />';
    	data += '适用星期：<label><input type="checkbox" name="box[]" value="1" />周一</label><label><input type="checkbox" name="box[]" value="2" />周二</label><label><input type="checkbox" name="box[]" value="3" />周三</label><label><input type="checkbox" name="box[]" value="4" />周四</label><label><input type="checkbox" name="box[]" value="5" />周五</label><label><input type="checkbox" name="box[]" value="6" />周六</label><label><input type="checkbox" name="box[]" value="0" />周天</label>';
    $("#floating").html(data);
	if(title&&infoid){
		$('#edit input[name="title"]').val(title);
		$('#edit input[name="parentTypeId"]').val(infoid);
	}else{
		var chk_value =[]; 
		$('input[name="typeid[]"]:checked').each(function(){ 
			chk_value.push($(this).val()); 
		});
		if(chk_value.length==0){
			pub_alert_error("你还没有选择房型！",2000);return false;
		}
		$('#title').remove();
	}
    $('#edit input[name="endtime"]').val('');
    $('#pop-up-boxes').css({'display':'block'});
    //动态添加时间控件 calss
    $('#edit input[name="statime"]').removeAttr('class');
    var now=new Date().getTime();
    $('#edit input[name="statime"]').addClass('sta_'+now);
    sdate('sta_'+now);
    $('#edit input[name="endtime"]').removeAttr('class');
    var now=new Date().getTime();
    $('#edit input[name="endtime"]').addClass('end_'+now);
    sdate('end_'+now);
    $('.ui-datepicker-trigger').remove();
}
function sdate(end_className){
    $("."+end_className).datepicker({
        minDate: 0,
        showMonthAfterYear: true,
        changeMonth: true,
        numberOfMonths: 1,
        showOn: "both",
        showButtonPanel:false,
        duration: 100,
    });
}

$(".from2").datepicker({
	minDate: 0,
	showMonthAfterYear: true,
	changeMonth: true,
	numberOfMonths: 1,
	showButtonPanel: true,
	showOn: "both",
	onSelect: function( selectedDate ) {
		$(this).next().datepicker( "option", "minDate", selectedDate );
	}
});
$(".to2").datepicker({
	minDate: 0,
	showMonthAfterYear: true,
	changeMonth: true,
	numberOfMonths: 1,
	showButtonPanel: true,
	showOn: "both",
});

$('#pop-up-boxess-text button').click(function(){
	var parent_TypeId=$('#pop-up-boxess-text input[name="parent_TypeId"]').val();
	var sta=$('#pop-up-boxess-text input[name="sta"]').val();
	var end=$('#pop-up-boxess-text input[name="end"]').val();
	var typeName=$('#pop-up-boxess-title label').html();
	showLog(parent_TypeId,sta,end,typeName);
});

function showLog(parent_TypeId,sta,end,typeName){
	$.ajax({
		type:'POST',
		url:'<?=$this->url("hotel/floatlog")?>',
		data:'parent_TypeId='+parent_TypeId+'&sta='+sta+'&end='+end,
		dataType:'json',
		success:function(r){
			if(r.state==1){
				$('#pop-up-boxess-title label').html(typeName);
				$('#pop-up-boxess-text input[name="sta"]').val(r.sta);
				$('#pop-up-boxess-text input[name="end"]').val(r.end);
				$('#pop-up-boxess-text input[name="parent_TypeId"]').val(r.parent_TypeId);
				$('#pop-up-boxess-text table tbody').html(r.html);
				$('#pop-up-boxess').show();
				$('#pop-up-boxess-text table tbody tr').hover(function(){
					$(this).css({'background-color':'#D9D9D9c'});
				},function(){
					$(this).css({'background-color':'#fff'});
				});
			}else{
				pub_alert_error(r.html,2000);
			}
		},
		error:function(){
			pub_alert_error("ajax出现错误",2000);
		}
	});
}
</script>